<template>
    <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <Menu active-name="1-2" theme="dark" width="auto" :open-names="['4']" @on-select="m=>{select(m)}">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        系统管理
                    </template>
                    <MenuItem name="1-1">用户管理</MenuItem>
                    <MenuItem name="1-2">角色管理</MenuItem>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-keypad"></Icon>
                        商品模块
                    </template>
                    <MenuItem name="2-1">商品评论管理</MenuItem>
                    <MenuItem name="2-2">商品管理</MenuItem>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        订单模块
                    </template>
                    <MenuItem name="3-1">订单管理</MenuItem>
                    <MenuItem name="3-2">广告管理</MenuItem>
                </Submenu>
                 <Submenu name="4">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        总览
                    </template>
                    <MenuItem name="4-1">数据总览</MenuItem>
                </Submenu>
            </Menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>
            <Content :style="{padding: '0 16px 16px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <BreadcrumbItem>Home</BreadcrumbItem>
                    <BreadcrumbItem>Components</BreadcrumbItem>
                    <BreadcrumbItem>Layout</BreadcrumbItem>
                </Breadcrumb>
                <Card>
                    <router-view/>
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script>
    export default {
        name:'index',
        data(){
            return{
                
            }
        },
      methods:{
          /*菜单选择事件*/
            select(e){
                if(e == '1-1'){
                    this.$router.push({
                        path:"/index/user"
                    })
                }else if(e == "4-1"){
                     this.$router.push({
                        path:"/index/dashboard"
                    })
                }else if(e == "2-2"){
                     this.$router.push({
                        path:"/index/shop"
                    })
                }
            },
        }
    }
</script>
<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
</style>
